<template>
  <div>
    <el-button type="primary" @click="Add">添加用户</el-button>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="formInline.userName" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formInline.createname" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getsho">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="userlist" style="width: 100%">
      <el-table-column prop="username" label="账号" width="180">
      </el-table-column>
      <el-table-column prop="createName" label="角色" width="180">
      </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column prop="userId" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="onSubmit(scope.row.userId)"
            >添加权限</el-button
          >
          <el-button size="mini" @click="Edit(scope.row.userId)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="Delete(scope.row.userId)"
            >删除</el-button
          >
        </template>
      </el-table-column> </el-table
    ><el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[1, 2, 3, 4, 9]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageCount"
    >
    </el-pagination>

    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <div slot="footer" class="dialog-footer">
        <user-add-view ref="userAdd"></user-add-view>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改用户" :visible.sync="dialogFormVisible1">
      <div slot="footer" class="dialog-footer">
        <user-upd-view :uIds="uIds" ref="userUpd"></user-upd-view>
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="saveUpd">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="分配角色" :visible.sync="dialogFormVisible2">
      <div slot="footer" class="dialog-footer">
        <user-role-view :uId="uId" ref="userRole"></user-role-view>
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveFeng">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import UserAddView from "./UserAddView.vue";
import UserUpdView from "./UserUpdView.vue";
import UserRoleView from "./UserRoleView.vue";
import { Show } from "@/api/admin";
import { Del } from "@/api/admin";
export default {
  components: {
    UserAddView,
    UserUpdView,
    UserRoleView,
  },
  data() {
    return {
      uIds: 0,
      uId: 0,
      userlist: [],
      pageCount: 0,
      formInline: {
        userName: "",
        createname: "",
        pageIndex: 1,
        pageSize: 2,
        totalCount: 0,
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
    };
  },
  methods: {
    getsho() {
      // this.axios
      //   .get("https://localhost:5001/api/User/ShowUser", {
      //     params: {
      //       pageIndex: this.formInline.pageIndex,
      //       pageSize: this.formInline.pageSize,
      //       uname: this.formInline.uname,
      //       createname: this.formInline.createname,
      //     },
      //   })
      //   .then((res) => {
      //     this.userlist = res.data.data;
      //     this.totalCount = res.data.totalCount;
      //   });
      Show(this.formInline).then((res) => {
        this.userlist = res.data;
        this.formInline.totalCount = res.totalCount;
        this.pageCount = Math.ceil(res.totalCount * this.formInline.pageSize);
      });
    },
    Add() {
      this.dialogFormVisible = true;
    },
    Delete(id) {
      // this.axios
      //   .delete("https://localhost:5001/api/User/DelUser?id=" + id)
      //   .then((res) => {
      //     if (res.data) {
      //       this.$message.success("删除成功");
      //     }
      //   });
      Del(id).then((res) => {
        if (res.data) {
          this.$message.success("删除成功");
        }
      });
    },
    Edit(Id) {
      this.uIds = Id;
      this.$refs.userUpd.Byid(Id);
      this.dialogFormVisible1 = true;
    },
    save() {
      this.$refs.userAdd.Adduser("ruleForm");
      this.dialogFormVisible = false;
      this.getsho();
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getsho();
    },
    handleCurrentChange(val) {
      this.formInline.pageIndex = val;
      this.getsho();
    },
    saveUpd() {
      this.$refs.userUpd.Upduser("ruleForm");
      this.dialogFormVisible1 = false;
      this.getsho();
    },
    // 提示弹框
    onSubmit(id) {
      this.uId = id;
      this.$refs.userRole.getsho(id);
      this.dialogFormVisible2 = true;
    },
    //分配角色
    saveFeng() {
      this.$refs.userRole.postUserRole();
    },
  },
  created() {
    this.getsho();
  },
};
</script>
<style>
</style>